今天把套件的「門面」定好，之後前端就能用一條乾淨的 import，這樣內裝怎麼改、檔名怎麼動，外面都不會受影響。

前情提要

• 你有 Day 2 產的 pkg/（例如檔名是 rustwasm_test.js / rustwasm_test_bg.wasm / rustwasm_test.d.ts）

• 若沒有，先在套件根目錄跑：

  wasm-pack build --target web --out-dir pkg --out-name rustwasm_test
  

怎模做？

1. 改 pkg/package.json
   • 把檔名換成你實際的。name 用你喜歡的 npm 名（可含破折號），檔名維持底線版沒關係。

{
  "name": "rustwasm-test",
  "version": "0.1.0",
  "type": "module",
  "exports": {
    ".": {
      "import": "./rustwasm_test.js",
      "types": "./rustwasm_test.d.ts"
    }
  },
  "types": "./rustwasm_test.d.ts",
  "sideEffects": false,
  "files": [
    "rustwasm_test.js",
    "rustwasm_test_bg.wasm",
    "rustwasm_test.d.ts",
    "package.json",
    "README.md"
  ]
}

真正要加的可能只有exports，因為其他應該都幫你寫好好的了。

2. 把 pkg 裝進 demo（用本地檔案依賴）

到 demo 目錄執行：

cd demo
pnpm remove rustwasm-test
pnpm add file:../pkg
pnpm add -D vite typescript

如果沒裝過就跳過第二行。

3. demo 裡用「套件名」來 import，並把 .wasm 的網址明講給 init

這一步順便解你剛剛的「MIME / magic word」錯誤。

// demo/src/main.ts
import init, { greet } from 'rustwasm-test'
import wasmUrl from 'rustwasm-test/rustwasm_test_bg.wasm?url' // 沒有這行就一直出現M「MIME / magic word」錯誤

;(async () => {
  await init(wasmUrl)   // 明確告訴 glue 真正的 .wasm 路徑
  greet?.('Vite')       // 或呼叫你自己的 API
})()

啟動：

pnpm dev

什麼是「MIME / magic word」錯誤？

MIME 錯誤＝伺服器回來的「檔案型別」不是 application/wasm。WebAssembly.instantiateStreaming 規定必須是這個 MIME，否則它就退回用「整包 bytes」的路徑跑。

magic word 錯誤＝載到的根本不是 wasm。wasm 檔頭前 4 個位元組必須是 00 61 73 6D（\0asm）。但收到的卻是 3c 21 64 6f，那是 <!do…（HTML 的 DOCTYPE），通常代表拿到 404/索引頁。

（但我就算知道是這個錯，我現在還不知道要怎麼從根本解決，但目前就先這樣吧88！

到底要怎麼空手騎腳踏車？